<template>
  <div class="newpage">
    <iu-header>
      <template #left>
        <img src="@/styles/logo.svg" alt="" style="width:40px" />
        安全作业审批
      </template>
      <template #title>
        <!-- <iconSvg name="g6change" w="25" style="color:#fff;margin-left: 8px;" @click.native="backToG6page('g6')"></iconSvg> -->
      </template>
      <template #right>
       <div v-focusable  @click="backToHomepage">
          <iconSvg name="home" w="20px" h="22px" class="right_icon"></iconSvg>
        </div>
      </template>
    </iu-header>
    <Application></Application>
    <div class="newpage_work">
      <div class="search">
        <div class="inputBox">
          <input
            type="text"
            class="searchFun"
            v-model="searchForm.code"
            placeholder="编号、作业证名称搜索"
          />
        </div>
        <div class="searchBtn" @click="getList">搜索</div>
      </div>
      <div class="tab-nav">
        <div
          class="tab-nav-item"
          :class="{ statusIndex: statusIndex == item.key }"
          v-for="(item, index) in tabNav"
          :key="index"
          @click="eventActive(item)"
        >
          <span>{{ tabNum[item.num] || 0 }}</span>
          <span>{{ item.value }}</span>
        </div>
      </div>
      <button class="ewm" @click="eventOperationAdd">
        申请
      </button>
      <div class="list-area">
        <template v-if="tableData.length">
          <iu-card
            class="early-card"
            v-for="(item, index) in tableData"
            :key="index"
            @click.native="eventShowDetail(item)"
          >
            <template #title>
              <div class="early-card-title">
                {{ item.name }}
              </div>
            </template>
            <template #tip>
              <div class="early-card-tip" :class="'status' + item.status">
                <span>
                  {{ stateArr[item.state] }}
                </span>
              </div>
            </template>
            <template #body>
              <div class="early-card-body">
                申请单位：{{ item.departmentName }}
              </div>
              <div class="early-card-body">作业证编号：{{ item.code }}</div>
              <div class="early-card-body">作业级别：{{ item.grade }}</div>
              <div class="early-card-body">作业地点：{{ item.place }}</div>
              <div class="early-card-body">
                作业时间：
                {{ item.startTime | formatDate("YYYY-MM-DD HH:mm") }}
                -
                {{ item.endTime | formatDate("YYYY-MM-DD HH:mm") }}
              </div>
            </template>
          </iu-card>
          <div class="newpage_work_more" v-if="showMoreBtn" @click="getMore">
            查看更多
          </div>
        </template>
        <template v-else>
          <div class="not-content">
            <img src="/static/img/zwlr-icon.png" />
            <div class="title">暂无数据</div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>
<script>
import { Tab, TabItem, Toast, InlineLoading, Datetime } from "vux";
import iuHeader from "@/components/common/header/index";
import iuCard from "@/components/common/card/index";
import SafetyManageDao from "@/daos/safety_manage_dao";
import checklist from "@/components/common/safetymanage/checklist";
import depTree from "@/components/common/tree";
import Application from "@/components/common/application";

import ChartList from "@/components/common/chart_list/index";
import DataAnalysisDao from "@/daos/data_analysis_dao";

export default {
  name: "earlywrning",
  components: {
    Tab,
    TabItem,
    Toast,
    iuHeader,
    iuCard,
    checklist,
    InlineLoading,
    ChartList,
    Datetime,
    Application,
    depTree
  },
  data() {
    return {
      showPie: false,
      showMore: false,
      showTree: false,
      curDepartment: {
        departmentName: "全企业",
        id: ""
      },
      searchForm: { code: "" },
      tabNum: {
        myExamine: 0,
        approvedExamine: 0,
        pendingExamine: 0
      },
      topNav: [
        { key: "inspectionPlan", name: "检查计划", isSelected: true },
        { key: "risksControl", name: "风险管控", isSelected: false },
        { key: "safetyRisks", name: "隐患整改", isSelected: false }
      ],
      tabNav: [
        // { key: 1, value: "待确认", num: "ofTheStocks" },
        { key: "", value: "我的", num: "myExamine" },
        { key: 4, value: "待审批", num: "pendingExamine" },
        { key: 2, value: "已审批", num: "approvedExamine" }
      ],
      stateArr: ["删除", "草稿", "审批完成", "驳回", "待审批"],
      chart: null,
      tableData: [],
      chartList: [],
      checkSecurityRecordData: [],
      showMoreBtn: false,
      certificateAuth: false,
      position: "middle",
      pageSize: 10,
      pageNum: 1,
      total: 0,
      statusIndex: "",
      tag: 1,
      store: {
        id: 0
      }
    };
  },
  created() {
    this.tag = this.$route.query.tag || 1;
    if (!this.user) {
      this.getUserInfo();
    } else {
      this.curDepartment = {
        departmentName: this.user.serviceAreaTree.departmentName,
        id: this.user.serviceAreaTree.id
      };
    }
  },
  //返回首页的公共方法
  inject: ["backToHomepage",'backToG6page'],

  activated() {
    if (this.user) {
      this.init();
    }
  },
  computed: {
    user() {
      return this.$store.state.user;
    },
    computedList() {
      let arr = this.tableData.filter(e => e.status == this.statusIndex - 1);
      return arr;
    }
  },
  methods: {
    init() {
      this.getList();
    },
    cancel() {
      this.show = false;
    },
    getPeople() {},
    handler(e) {
      this.pageNum = 1;
      this.tag = e;
      this.getList();
    },
    getMore() {
      this.pageNum++;
      this.showMoreBtn = false;
      this.getList();
    },
    back() {},
    getUserInfo() {
      this.$http(this.$API.getUserInfo, {}).then(res => {
        this.$store.commit("saveUser", res);
        this.curDepartment = {
          departmentName: res.serviceAreaTree.departmentName,
          id: res.serviceAreaTree.id
        };
        this.init();
      });
    },
    eventShowDetail(item) {
      let { id, type } = item;
      this.$router.push({
        name: "safetyOperationApprove",
        query: { id, type }
      });
    },
    eventActive(item) {
      this.pageNum = 1;
      this.showMoreBtn = false;
      this.statusIndex = item.key;
      this.getList();
    },
    getList() {
      // this.getSafeExamineList();
      this.getSafeExamineStateNum();

      let params = {
        code: this.searchForm.code,
        orgId: this.user.org.id,
        pageSize: this.pageSize,
        pageNum: this.pageNum
      };
      if (this.statusIndex === 4) {
        this.getSafeExaminePendingList(params);
      } else if (this.statusIndex === 2) {
        this.getSafeExamineApprovedList(params);
      } else if (!this.statusIndex) {
        this.getSafeExamineMyList(params);
      }
    },

    getSafeExamineApprovedList(params) {
      SafetyManageDao.getSafeExamineApprovedList(params, res => {
        if (this.pageNum === 1) {
          this.tableData.splice(0);
        }
        if (res.content && res.content.length) {
          this.tableData.splice(
            (this.pageNum - 1) * this.pageSize,
            this.pageSize,
            ...res.content
          );
          this.total = +res.total;
        }
        this.showMoreBtn = this.tableData.length < this.total;
      });
    },
    getSafeExamineMyList(params) {
      SafetyManageDao.getSafeExamineMyList(params, res => {
        if (this.pageNum === 1) {
          this.tableData.splice(0);
        }
        if (res.content && res.content.length) {
          this.tableData.splice(
            (this.pageNum - 1) * this.pageSize,
            this.pageSize,
            ...res.content
          );
          this.total = +res.total;
        }
        this.showMoreBtn = this.tableData.length < this.total;
      });
    },
    getSafeExaminePendingList(params) {
      SafetyManageDao.getSafeExaminePendingList(params, res => {
        if (this.pageNum === 1) {
          this.tableData.splice(0);
        }
        if (res.content && res.content.length) {
          this.tableData.splice(
            (this.pageNum - 1) * this.pageSize,
            this.pageSize,
            ...res.content
          );
          this.total = +res.total;
        }
        this.showMoreBtn = this.tableData.length < this.total;
      });
    },

    getSafeExamineList() {
      let params = {
        orgId: this.user.org.id,
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        state: this.statusIndex,
        selectType: this.statusIndex === 4 ? 1 : this.statusIndex === 2 ? 2 : 4
      };
      SafetyManageDao.getSafeExamineList(params, res => {
        if (this.pageNum === 1) {
          this.tableData.splice(0);
        }
        if (res.content && res.content.length) {
          this.tableData.splice(
            (this.pageNum - 1) * this.pageSize,
            this.pageSize,
            ...res.content
          );
          this.total = +res.total;
        }
        this.showMoreBtn = this.tableData.length < this.total;
      });
    },
    getSafeExamineStateNum() {
      let params = {
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        codeOrName: this.searchForm.code
        // status: this.statusIndex
      };
      SafetyManageDao.getSafeExamineStateNum(params, res => {
        if (res) {
          Object.assign(this.tabNum, res);
        }
      });
    },
    showTreeFn(status) {
      if (status) {
        this.$refs.selece_icon.$el.style.transform = "rotate(-180deg)";
      } else {
        this.$refs.selece_icon.$el.style.transform = "rotate(0deg)";
      }
      this.showTree = status;
    },
    initCurDepartment(id, departmentName) {
      this.curDepartment = {
        departmentName,
        id
      };
    },
    change(id, departmentName) {
      this.curDepartment = {
        departmentName,
        id
      };
      this.getList();
      this.getCheckSecurityRecordNumCharts();
    },
    eventOperationAdd() {
      this.$store.commit("setSafeExamineDetail", {});
      this.$router.push({
        name: "safetyOperationApprove",
        query: {}
      });
    }
  }
};
</script>
<style lang="less">
.newpage_tab {
  .vux-tab {
    height: 45px !important;
    background: #1b1c32;
    .vux-tab-item {
      background: none;
      color: #fff;
    }
  }
}
</style>
<style lang="less" scoped>
.newpage {
  height: 100vh;
  background: #1b1c32;
  overflow-y: scroll;
}
.list-area {
  padding: 16px;

  .conent-list {
    margin-bottom: 16px;
  }
  .early-card {
    margin-bottom: 16px;
    .early-card-title {
      color: #409eff;
      &.warning {
        color: #ffb62c;
      }
      &.error {
        color: #ff2c2c;
      }
    }
    .early-card-tip {
      display: flex;
      justify-content: flex-end;
      margin-right: -8px;
      span {
        padding: 2px 6px 4px;
        text-align: right;
        background-color: #292a4d;
        border-radius: 5px;
      }
      &.status1 {
        color: #f56c6c;
      }
      &.status3 {
        color: #409eff;
      }
      &.status5,
      &.status9 {
        color: gray;
      }
    }
    .early-card-body {
      margin: 8px 0;
    }
    .early-card-department {
      margin: 8px 0;
      color: rgba(255, 255, 255, 0.8);
    }
    .early-card-bottom {
      padding-top: 8px;
      border-top: 1px solid rgba(255, 255, 255, 0.4);
      color: rgba(255, 255, 255, 0.6);
    }
  }
}

.newpage_work_more {
  height: 40px;
  font-size: 12px;
  line-height: 40px;
  text-align: center;
  color: #456de6;
}

.newpage_work {
  // 搜索
  .search {
    width: 100%;
    height: 40px;
    padding: 8px;
    box-sizing: border-box;
    background-color: #18182c;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .inputBox {
      width: 100%;
      height: 100%;
      background-color: #11111f;
      padding: 0 8px;
      box-sizing: border-box;
      .searchFun {
        width: 90%;
        height: 100%;
        border: none;
        outline: none;
        font-size: 15px;
        color: #ffffff;
      }
    }
    .searchBtn {
      flex: none;
      padding: 0 8px;
      color: rgba(255, 255, 255, 0.6);
    }
  }
  .tab-nav {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: 12px 0;
    .tab-nav-item {
      flex: 1;
      color: #456de6;
      font-size: 14px;
      padding: 6px 0 8px;
      margin: 0 4px;
      text-align: center;
      border-radius: 4px;
      border: 1px solid #456de6;
      display: flex;
      flex-direction: column;
      &.overdue {
        color: #f5a623;
        border: 1px solid #f5a623;
      }
      &.statusIndex {
        color: #fff;
        background: #456de6;
        border: 1px solid #456de6;
        &.overdue {
          color: #fff;
          background: #f5a623;
          border: 1px solid #f5a623;
        }
      }
    }
  }

  .ewm {
    position: fixed;
    right: 16px;
    bottom: 36px;
    width: 48px;
    height: 48px;
    outline: none;
    border: none;
    border-radius: 50%;
    background: rgba(69, 109, 230, 0.4);
    color: #fff;
    font-size: 12px;
    line-height: 46px;
    text-align: center;
    user-select: none;
    z-index: 9999;
    padding: 0;
    &:active {
      background: rgba(69, 109, 230, 0.6);
    }
  }
}
.not-content {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  img {
    width: 64px;
    height: 64px;
    margin-left: 20px;
  }
  .title {
    margin: 8px auto;
    width: 126px;
    height: 40px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(158, 198, 251, 1);
    line-height: 20px;
    text-align: center;
  }
}
.newpage_title {
  height: 44px;
  background: #18182c;
  padding: 0 15px;
  display: flex;
  span {
    display: inline-block;
    color: #ffff;
    font-size: 15px;
    vertical-align: middle;
  }
  .nav-left {
    .company-logo {
      height: 100%;
      width: 48px;
    }
  }
  .nav-center {
    flex: 1;
    line-height: 44px;
    text-align: center;
    font-size: 16px;
    color: #fff;
  }
  .nav-right {
    margin-top: 12px;
    width: 36px;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    .paidan {
      margin-top: -8px;
      i {
        font-size: 26px;
      }
    }
  }
  .nav_border_left {
    border-left: 2px solid #fff;
    height: 20px;
  }
}
</style>
